<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path" :to="{ path: item.path }">
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Breadcrumb',
  computed: {
    breadcrumbItems() {
      return this.$route.matched
          .filter(item => item.meta && item.meta.title)
          .map(item => ({
            path: item.path,
            meta: item.meta
          }));
    }
  }
}
</script>
<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
}
</style>